<template>
	<div id="newField">
		<div class="breadcrumb">
			<img src="../../../../static/img/venueManage_1.png" class="head_img">
			<span class="title" @click="cancelVenue()">场馆管理</span>
			<span class="title" @click="cancel()">/ 场地管理</span>
			<span>/ {{actionText}}</span>

		</div>

		<div class="list">
			<div class="list_head">
				<span>场地信息</span>
				<el-button class="save" type="primary" @click="save()">保存</el-button>
				<el-button class="cancel" type="primary" @click="cancel()">取消</el-button>
			</div>
			<el-form ref="fieldForm" :model="fieldForm" :rules="rules" label-width="100px">
				<el-form-item label="场地名称:" prop="name">
					<el-input v-model="fieldForm.name" placeholder="请输入场地名称，不超过20个字符" class="el-input"></el-input>
				</el-form-item>
				<el-form-item label="运动项目:" required>
					<el-select v-model="fieldForm.sportType" style="width:350px;">
						<el-option v-for='item in options' :label='item.sportItemName' :value='item.sportItemId' :key="item.sportItemId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="开场时间:" required>
					<el-time-select placeholder="起始时间" v-model="fieldForm.startTime" :picker-options="timeRange" style="width:200px;"></el-time-select>
					<el-time-select placeholder="结束时间" v-model="fieldForm.endTime" :picker-options="timeRange_end" style="width:200px;"></el-time-select>
				</el-form-item>
				<el-form-item label="可预订天数:" prop="bookDays" required>
					<el-input v-model="fieldForm.bookDays" type="number" placeholder="请输入可预订天数" class="el-input"></el-input>
					<span class="tips">可预订天数建议设在7天以内</span>
				</el-form-item>
				<!-- <div class="tips">可预订天数建议设在7天以内</div> -->
				<el-form-item label="场地个数:" prop="fieldsNum" required>
					<el-input v-model="fieldForm.fieldsNum" type="number" placeholder="请输入场地个数" class="el-input"></el-input>
				</el-form-item>
				<el-form-item label="场地类型:" required>
					<el-select v-model="fieldForm.chargeType" :disabled="fieldId != '0'">
						<el-option label="小时制" value="1"></el-option>
						<el-option label="半小时制" value="0"></el-option>
						<el-option label="门票制" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="运动地点:" required>
					<el-radio v-model="fieldForm.sportPlace" label="0">室内</el-radio>
					<el-radio v-model="fieldForm.sportPlace" label="1">户外</el-radio>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			let checkCount = (rule, value, callback) => {
				if (value) {
					if (value * 1 <= 0) {
						callback(new Error("请输入正确的场地个数"));
					} else {
						callback();
					}
				} else {
					callback(new Error("请输入场地个数"));
				}
			};
			let checkbookDays = (rule, value, callback) => {
				if (value) {
					if (value * 1 <= 0 || value * 1 > 14) {
						callback(new Error("请输入正确的可预订天数"));
					} else {
						callback();
					}
				} else {
					callback(new Error("请输入可预订天数"));
				}
			};
			return {
				actionText: "新增场地",
				fieldId: "0",
				unid: "",
				venueId: "",
				options: [],
				startTime: "",
				endTime: "",
				range: {},
				timeRange: {},
				timeRange_end: {},
				fieldForm: {
					name: "",
					sportType: "",
					startTime: "",
					endTime: "",
					bookDays: "",
					fieldsNum: "",
					chargeType: "1",
					sportPlace: "0"
				},
				rules: {
					name: [
						{ required: true, message: "请输入场地名称", trigger: "blur" },
						{ min: 1, max: 20, message: "不超过20个字符", trigger: "blur" }
					],
					bookDays: [
						{ required: true, message: "请输入可预订天数", trigger: "blur" },
						{ validator: checkbookDays }
					],
					fieldsNum: [
						{ required: true, message: "请输入场地个数", trigger: "blur" },
						{ validator: checkCount }
					]
				}
			};
		},
		mounted() {
			this.venueId = this.$util.getUrlParam("venueId");
			this.fieldId = this.$util.getUrlParam("fieldId");
			this.startTime = this.$util.getUrlParam("startTime");
			this.endTime = this.$util.getUrlParam("endTime");
			this.unid = this.$util.getUrlParam("unid");
			this.timeRange = {
				start: this.startTime.replace("-", ":"),
				step: "00:30",
				end: this.endTime.replace("-", ":")
			};
			this.timeRange_end = {
				start: this.startTime.replace("-", ":"),
				step: "00:30",
				end: this.endTime.replace("-", ":"),
				minTime: this.fieldForm.startTime
			};
			if (this.fieldId !== "0") {
				this.actionText = "编辑场地";
				this.getAllItem();
				this.getDetail(this.fieldId);
			} else {
				this.getAllItem();
			}
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//保存
			save() {
				let url = this.$util.domain + "/erp/api/v20/venue/field/edit";
				if (!this.fieldForm.startTime || !this.fieldForm.endTime) {
					this.$util.errorMsg("请选择场地开场时间");
					return false;
				}

				this.$refs.fieldForm.validate(valid => {
					if (valid) {
						let sportTypeId;
						this.options.forEach(item => {
							if (parseInt(this.fieldForm.sportType) == item.sportItemId) {
								sportTypeId = item.parentSportTypeId;
							}
						});

						this.$http({
							url,
							method: "POST",
							body: JSON.stringify({
								sportTypeId: sportTypeId,
								unid: parseInt(this.unid),
								name: this.fieldForm.name,
								id: parseInt(this.fieldId),
								venueId: parseInt(this.venueId),
								openEndTime: this.fieldForm.endTime,
								sportPlace: this.fieldForm.sportPlace,
								openStartTime: this.fieldForm.startTime,
								count: parseInt(this.fieldForm.fieldsNum),
								bookDays: parseInt(this.fieldForm.bookDays),
								chargeType: parseInt(this.fieldForm.chargeType),
								sportItemId: parseInt(this.fieldForm.sportType)
							})
						}).then(response => {
							if (response.data.error == 10000) {
								this.$util.successMsg("保存成功");
								let params = {
									unid: this.unid,
									endTime: this.endTime,
									venueId: this.venueId,
									startTime: this.startTime,
									pageNum: this.$util.getUrlParam("pageNum"),
								}
								this.$util.refreshTo("/#/fieldManage", params);
							} else {
								this.$util.errorMsg(response.data.message);
							}
						}, (response) => {
							this.$util.errorMsg(response.data.message);
						}
						);
					}
				});
			},
			// 获取该场馆下所有运动项目;
			getAllItem() {
				let url = this.$util.domain + "/erp/api/v20/tools/sportitem";

				this.$http({
					url,
					method: "GET",
					params: {
						venueId: parseInt(this.venueId)
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let dataList = response.data.data;
						this.options = dataList;
					}
				});
			},
			//返回场地列表
			cancel() {
				let pageNum = this.$util.getUrlParam("pageNum");
				let params = {
					pageNum,
					unid: this.unid,
					venueId: this.venueId,
					endTime: this.endTime,
					startTime: this.startTime
				}
				this.$util.refreshTo("/#/fieldManage", params);
			},
			// 返回场馆列表
			cancelVenue() {
				location.href = "/#/venueManage";
			},
			//根据场地id获取场地详情
			getDetail(id) {
				let url = this.$util.domain + "/erp/api/v20/venue/field/detail";

				this.$http({
					url,
					method: "GET",
					params: {
						fieldId: parseInt(id)
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let dataObj = response.data.data;
						let now = new Date().format("yyyy/MM/dd");
						this.fieldForm = {
							name: dataObj.name,
							endTime: dataObj.openEndTime,
							sportItem: dataObj.sportItem,
							fieldsNum: dataObj.count + "",
							sportType: dataObj.sportItemId,
							bookDays: dataObj.bookDays + "",
							startTime: dataObj.openStartTime,
							chargeType: dataObj.chargeType + "",
							sportPlace: dataObj.sportPlace + ""
						};
					}
				});
			}
		}
	};
</script>

<style scoped>
	#newField {
		padding-top: 80px;
		height: calc(100% - 100px);
		overflow: hidden;
	}

	.title {
		color: #0398ff;
	}

	#newField .el-input {
		display: inline-block;
		width: 40%;
	}

	.tips {
		color: red;
		font-size: 12px;
		margin-bottom: 20px;
		padding-left: 15px;
	}
</style>